<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>礼簿 - 礼金管理应用</title>
    <script src="js/tailwindcss.js"></script>
    <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="js/chart.umd.min.js"></script>
	<script src="js/api.js"></script>
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#C41E3A', // 主色调：喜庆红
                        secondary: '#D4AF37', // 辅助色：金色
                        neutral: '#F9F5F1', // 中性色：米白
                        dark: '#2D2926', // 深色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)',
                        'card-hover': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                    }
                },
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .no-wrap-ellipsis {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .loading-overlay {
                background-color: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(2px);
            }
        }
    </style>
</head>

<body class="bg-neutral min-h-screen font-sans text-dark">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-md fixed w-full top-0 z-50 transition-custom">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-book text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">礼簿</h1>
            </div>
            
            <nav class="hidden md:flex items-center space-x-6">
                <a href="#dashboard" class="font-medium hover:text-primary transition-custom flex items-center">
                    <i class="fa fa-home mr-1"></i> 首页
                </a>
                <a href="#records" class="font-medium hover:text-primary transition-custom flex items-center">
                    <i class="fa fa-list-alt mr-1"></i> 记录
                </a>
                <a href="#statistics" class="font-medium hover:text-primary transition-custom flex items-center">
                    <i class="fa fa-bar-chart mr-1"></i> 统计
                </a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <button id="addRecordBtn" class="bg-primary hover:bg-primary/90 text-white px-5 py-3 rounded-lg shadow transition-custom flex items-center text-lg">
                    <i class="fa fa-plus mr-2"></i> 新增记录
                </button>
                <button id="logoffBtn" class="bg-primary hover:bg-primary/90 text-white px-5 py-3 rounded-lg shadow transition-custom flex items-center text-lg">
                    <i class="fa"></i> 退出
                </button>
				
                <button class="md:hidden text-dark text-2xl" id="mobileMenuBtn">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="hidden md:hidden bg-white border-t animate-fadeIn">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
                <a href="#dashboard" class="font-medium hover:text-primary py-2 transition-custom text-lg">
                    <i class="fa fa-home mr-2"></i> 首页
                </a>
                <a href="#records" class="font-medium hover:text-primary py-2 transition-custom text-lg">
                    <i class="fa fa-list-alt mr-2"></i> 记录
                </a>
                <a href="#statistics" class="font-medium hover:text-primary py-2 transition-custom text-lg">
                    <i class="fa fa-bar-chart mr-2"></i> 统计
                </a>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 加载指示器 -->
        <div id="loadingIndicator" class="fixed inset-0 z-50 flex items-center justify-center hidden loading-overlay">
            <div class="bg-white p-6 rounded-xl shadow-lg flex items-center">
                <i class="fa fa-circle-o-notch fa-spin text-primary text-2xl mr-3"></i>
                <span class="text-lg font-medium">加载中...</span>
            </div>
        </div>
        
        <!-- 欢迎消息 -->
        <section id="dashboard" class="mb-10">
            <div class="bg-gradient-to-r from-primary/90 to-primary rounded-2xl shadow-lg p-6 md:p-8 text-white">
                <h2 class="text-[clamp(1.8rem,4vw,3rem)] font-bold mb-3 text-shadow">欢迎使用礼簿</h2>
                <p class="text-white/90 text-xl max-w-2xl">轻松记录和管理您的礼金往来，让每一笔人情都清晰可查。</p>
                
                <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-5 transform hover:scale-105 transition-custom">
                        <p class="text-white/80 text-base">总记录数</p>
                        <p class="text-3xl font-bold mt-1" id="totalRecords">0</p>
                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-5 transform hover:scale-105 transition-custom">
                        <p class="text-white/80 text-base">总金额</p>
                        <p class="text-3xl font-bold mt-1" id="totalAmount">¥0.00</p>
                    </div>
                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-5 transform hover:scale-105 transition-custom">
                        <p class="text-white/80 text-base">最近更新</p>
                        <p class="text-2xl font-bold mt-1" id="lastUpdated">暂无记录</p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 记录列表部分 -->
        <section id="records" class="mb-10">
            <div class="bg-white rounded-2xl shadow-card p-6 transition-custom hover:shadow-card-hover">
                <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold mb-4 md:mb-0">礼金记录</h2>
                    
                    <div class="flex flex-col sm:flex-row gap-3">
                        <div class="relative">
                            <input type="text" id="searchInput" placeholder="搜索姓名或备注..." 
                                class="pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom w-full sm:w-72 text-base">
                            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
                        </div>
                        
                        <select id="filterSelect" class="border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-base">
                            <option value="all">全部记录</option>
                            <option value="in">收入</option>
                            <option value="out">支出</option>
                        </select>
                    </div>
                </div>
                
                <!-- 记录列表 -->
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead>
                            <tr>
                                <th class="px-4 py-4 bg-gray-50 text-left text-sm font-medium text-gray-500 uppercase tracking-wider rounded-tl-lg">姓名</th>
                                <th class="px-4 py-4 bg-gray-50 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">关系</th>
                                <th class="px-4 py-4 bg-gray-50 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">金额</th>
                                <th class="px-4 py-4 bg-gray-50 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">类型</th>
                                <th class="px-4 py-4 bg-gray-50 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">日期</th>
                                <!-- <th class="px-4 py-4 bg-gray-50 text-left text-sm font-medium text-gray-500 uppercase tracking-wider rounded-tr-lg">操作</th> -->
                            </tr>
                        </thead>
                        <tbody id="recordsTableBody" class="bg-white divide-y divide-gray-200">
                            <!-- 记录将通过JavaScript动态添加 -->
                            <tr class="text-center">
                                <td colspan="6" class="px-4 py-10 text-gray-500">
                                    <i class="fa fa-folder-open-o text-4xl mb-3 text-gray-300"></i>
                                    <p>暂无记录，请添加第一条礼金记录</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <!-- 分页 -->
                <div class="flex justify-between items-center mt-6">
                    <p class="text-base text-gray-600">显示 <span id="showingRange">0-0</span> 条，共 <span id="totalCount">0</span> 条</p>
                    <div class="flex space-x-2">
                        <button id="prevPage" class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-custom text-base" disabled>
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <button id="nextPage" class="px-4 py-2 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed transition-custom text-base" disabled>
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 统计分析部分 -->
        <section id="statistics" class="mb-10">
            <div class="bg-white rounded-2xl shadow-card p-6 transition-custom hover:shadow-card-hover">
                <h2 class="text-2xl font-bold mb-6">统计分析</h2>
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                    <!-- 金额统计图表 -->
                    <div class="bg-gray-50 p-4 rounded-xl">
                        <h3 class="text-lg font-semibold mb-4">收支趋势</h3>
                        <div class="h-80">
                            <canvas id="trendChart"></canvas>
                        </div>
                    </div>
                    
                    <!-- 分类统计图表 -->
                    <div class="bg-gray-50 p-4 rounded-xl">
                        <h3 class="text-lg font-semibold mb-4">收支占比</h3>
                        <div class="h-80 flex items-center justify-center">
                            <canvas id="pieChart"></canvas>
                        </div>
                    </div>
                </div>
                
                <!-- 按关系分类统计 -->
                <div>
                    <h3 class="text-lg font-semibold mb-4">按关系分类</h3>
                    <div class="grid grid-cols-1 ">
                        <div id="relationStats" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                            <!-- 关系统计将通过JavaScript动态添加 -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center mb-4 md:mb-0">
                    <i class="fa fa-book text-primary text-2xl mr-2"></i>
                    <span class="font-bold text-xl">礼簿</span>
                </div>
                
                <div class="flex space-x-6 mb-4 md:mb-0">
                    <a href="#" class="hover:text-primary transition-custom"><i class="fa fa-question-circle"></i> 帮助</a>
                    <a href="#" class="hover:text-primary transition-custom"><i class="fa fa-shield"></i> 隐私</a>
                    <a href="#" class="hover:text-primary transition-custom"><i class="fa fa-file-text-o"></i> 条款</a>
                </div>
                
                <div class="text-gray-400 text-sm">
                    &copy; 2025 礼簿应用 - 保留所有权利
                </div>
            </div>
        </div>
    </footer>

    <!-- 添加/编辑记录模态框 -->
    <div id="recordModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <!-- 修改模态框内容区域为两栏布局 -->
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-4xl transform transition-all animate-fadeIn">
            <div class="p-6 border-b">
                <div class="flex justify-between items-center">
                    <h3 id="modalTitle" class="text-2xl font-bold">添加礼金记录</h3>
                    <button id="closeModal" class="text-gray-500 hover:text-gray-700 transition-custom">
                        <i class="fa fa-times text-2xl"></i>
                    </button>
                </div>
            </div>
            
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 左侧表单区域 -->
                    <form id="recordForm" class="space-y-4"> <!-- 减小表单内元素间距 -->
                        <input type="hidden" id="recordId">
                        
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label> <!-- 缩小标签字体和间距 -->
                            <input type="text" id="name" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-base"> <!-- 减小内边距和字体 -->
                        </div>
                        
                        <div>
                            <label for="relationship" class="block text-sm font-medium text-gray-700 mb-1">关系</label>
                            <select id="relationship" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-base">
                                    <option value="亲戚">亲戚</option>
                                    <option value="同事">同事</option>
                                    <option value="同学">同学</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">金额 (¥)</label>
                            <!-- 预设金额radio选项 -->
                            <div id="radioContainer" class="flex flex-wrap gap-4 mb-3"> <!-- 减小选项间距 -->

                            </div>
                            
                            <!-- 自定义金额输入框（默认隐藏） -->
                            <div id="customAmountContainer" class="hidden mb-1">
                                <input type="number" id="customAmount" min="0" step="0.01" 
                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-base"
                                    placeholder="请输入其他金额">
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">类型</label>
                            <div class="flex space-x-4"> <!-- 减小选项间距 -->
                                <label class="inline-flex items-center text-base">
                                    <input type="radio" name="type" value="in" checked
                                        class="text-primary focus:ring-primary/50 border-gray-300 h-4 w-4"> <!-- 缩小radio按钮 -->
                                    <span class="ml-2">收入</span>
                                </label>
                                <label class="inline-flex items-center text-base">
                                    <input type="radio" name="type" value="out"
                                        class="text-primary focus:ring-primary/50 border-gray-300 h-4 w-4">
                                    <span class="ml-2">支出</span>
                                </label>
                            </div>
                        </div>
                        
                        <div>
                            <label for="date" class="block text-sm font-medium text-gray-700 mb-1">时间</label>
                            <input type="date" id="date" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-base">
                        </div>
                        
                        <div>
                            <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                            <textarea id="notes" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-custom text-base"></textarea>
                        </div>
                        
                        <div class="pt-2"> <!-- 减小顶部间距 -->
                            <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg shadow transition-custom text-base"> <!-- 减小按钮内边距和字体 -->
                                保存记录
                            </button>
                        </div>
                    </form>
                    
					<!-- 右侧红包预览区域（高度适配模态框） -->
					<div class="flex items-center justify-center h-full p-4">
					    <div class="relative w-full max-w-xs">
					        <!-- 红包主体（高度适配） -->
					        <div class="bg-red-600 rounded-lg shadow-2xl border-2 border-red-700 relative overflow-hidden h-[85vh] max-h-[500px] flex flex-col">
					            
					            <!-- 红包底部褶皱装饰 -->
					            <div class="absolute bottom-0 left-0 right-0 h-8 bg-red-700 opacity-70" style="clip-path: polygon(0 0, 25% 100%, 75% 100%, 100% 0)"></div>
					            
					            <!-- 红包内容（垂直分布） -->
					            <div class="relative z-10 flex flex-col items-center justify-around flex-grow p-6 pt-10 pb-16">
					                <!-- 姓名预览（放大） -->
					                <div class="text-center mt-4">
					                    <p id="previewName" class="text-6xl font-extrabold text-amber-300 tracking-wider leading-tight">-</p>
					                </div>
					                
					                <!-- 金线分隔 -->
					                <div class="flex items-center justify-center gap-3 w-full my-2">
					                    <div class="h-px flex-1 bg-amber-300 opacity-70"></div>
					                    <span class="text-amber-300 text-sm">礼金</span>
					                    <div class="h-px flex-1 bg-amber-300 opacity-70"></div>
					                </div>
					                
					                <!-- 金额预览（放大） -->
					                <div class="text-center">
					                    <p id="previewAmount" class="text-5xl font-extrabold text-amber-200 leading-tight">¥0.00</p>
					                </div>
					            </div>
					        </div>
					        
					        <!-- 红包底部阴影（增强立体感） -->
					        <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-4/5 h-8 bg-red-900 rounded-full opacity-30 blur-md"></div>
					    </div>
					</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认删除模态框 -->
    <div id="deleteModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all animate-fadeIn">
            <div class="text-center mb-4">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-primary mb-4">
                    <i class="fa fa-exclamation-triangle text-2xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">确认删除</h3>
                <p class="text-gray-600">您确定要删除这条记录吗？此操作无法撤销。</p>
            </div>
            
            <div class="flex space-x-3 mt-6">
                <button id="cancelDelete" class="flex-1 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-custom text-lg">
                    取消
                </button>
                <button id="confirmDelete" class="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-custom text-lg">
                    确认删除
                </button>
            </div>
        </div>
    </div>

    <!-- 通知提示 -->
    <div id="notification" class="fixed bottom-6 right-6 bg-dark text-white px-6 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i id="notificationIcon" class="fa fa-check-circle mr-2"></i>
        <span id="notificationMessage"></span>
    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="js/index.js"></script>
</body>
</html>
    